
<template>
  <div>
    <div class="start">
      <div class="ret">
        <van-nav-bar title="地图选址" left-text="返回" left-arrow @click-left="toHomeAndCompany()"/>
      </div>
      <div>
        <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="地区"
            placeholder="请选择所在地区"
            @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="options"
              @close="show = false"
              @finish="onFinish"
          />
        </van-popup>
      </div>
      <!-- 高德地图 -->
      <div id="container"></div>
      <div id='right'>
        <div>
          <div class='title'>选择模式</div>
          <input type='radio' name='mode' value='dragMap' v-model="selectedMode" checked>拖拽地图模式<br>
          <input type='radio' name='mode' value='dragMarker' v-model="selectedMode">拖拽 Marker 模式
        </div>
        <div>
          <button id='start' @click="startSelection">开始选点</button>
          <button id='stop' @click="stopSelection">关闭选点</button>
        </div>
        <div>
          <div class='title'>选址结果</div>
          <div class='c'>经纬度:</div>
          <div id='lnglat'>{{ lnglat }}</div>
          <div class='c'>地址:</div>
          <div id='address'>{{ address }}</div>
          <div class='c'>最近的路口:</div>
          <div id='nearestJunction'>{{ nearestJunction }}</div>
          <div class='c'>最近的路:</div>
          <div id='nearestRoad'>{{ nearestRoad }}</div>
          <div class='c'>最近的 POI:</div>
          <div id='nearestPOI'>{{ nearestPOI }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>import {useCascaderAreaData} from "@vant/area-data";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: useCascaderAreaData(),
      map: null,
      selectedMode: 'dragMap',
      lnglat: '',
      address: '',
      nearestJunction: '',
      nearestRoad: '',
      nearestPOI: ''
    }
  },
  created() {},
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  },
  methods: {
    toHomeAndCompany(){
      this.$router.push({
        path: '/homeAndCompany',
      })
    },
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "9708bfa416d306b9dbaf55ea4e4a25f2",
      };

      AMapLoader.load({
        key: "e6effe38515227141202b9fb6749424e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar", //工具条
          "AMap.Scale", // 比例尺
          "AMap.Geolocation", //定位
          "AMap.PlaceSearch", //查询
          'AMap.AutoComplete',
          "AMap.Marker",
          'misc/PositionPicker'
        ]
      }).then((AMap) => {
        this.map = new AMap.Map('container', {
          zoom: 11,
          center: [116.39, 39.9]
        });

        // 检查 PositionPicker 是否加载成功
        if (!AMap.PositionPicker) {
          console.error('PositionPicker plugin not loaded');
          return;
        }

        const PositionPicker = AMap.PositionPicker;

        this.positionPicker = new PositionPicker({
          mode: this.selectedMode,
          map: this.map
        });

        this.positionPicker.on('success', (positionResult) => {
          this.lnglat = positionResult.position;
          this.address = positionResult.address;
          this.nearestJunction = positionResult.nearestJunction;
          this.nearestRoad = positionResult.nearestRoad;
          this.nearestPOI = positionResult.nearestPOI;
        });

        this.positionPicker.on('fail', (positionResult) => {
          console.log('Position result:', positionResult);
          this.lnglat = '';
          this.address = '';
          this.nearestJunction = '';
          this.nearestRoad = '';
          this.nearestPOI = '';
        });

        this.positionPicker.start();
        this.map.addControl(new AMap.ToolBar({
          liteStyle: true
        }));
      }).catch((error) => {
        console.error('Error loading AMap:', error);
      });
    },
    startSelection() {
      this.positionPicker.start();
    },
    stopSelection() {
      this.positionPicker.stop();
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({selectedOptions}) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      console.log(this.fieldValue);
    },
    toHomeIndex() {
      // 返回首页的逻辑
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 90vh;
  margin-top: 0px;
}

#right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.title {
  font-weight: bold;
  margin-bottom: 5px;
}

.c {
  font-weight: bold;
}
</style>